<template>
	<el-dialog :visible.sync="options.showDialog" width="800px" class="evalDialog">
		<h3 class="header-title clearfix">
			<span class="border"></span>
			<p>{{ruleForm.shopName?ruleForm.shopName:ruleForm.manageInteralnum}}</p>
		</h3>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="ruleForm">
			<el-form-item label="入职人员姓名" prop="nextusername">
				<el-input v-model="ruleForm.nextusername" disabled></el-input>
			</el-form-item>
			<el-form-item label="手机号码" prop="telnum">
				<el-input v-model="ruleForm.telnum" disabled></el-input>
			</el-form-item>
			<el-form-item label="入职平台专享岗位" prop="positionname">
				<el-input v-model="ruleForm.positionname" disabled></el-input>
			</el-form-item>
			<el-form-item label="企业名称" prop="companyname">
				<el-input v-model="ruleForm.companyname" disabled></el-input>
			</el-form-item>
			<el-form-item label="入职日期" prop="entrydate">
				<el-input v-model="ruleForm.entrydate" disabled></el-input>
			</el-form-item>
			<el-form-item label="奖励标准" prop="entrydate">
				<el-input v-model="ruleForm.refundStaff" disabled></el-input>
				<el-input v-model="ruleForm.refundStore" disabled></el-input>
			</el-form-item>
			<el-form-item label="管理门店名称" prop="entrydate">
				<el-input v-model="ruleForm.manageShopName" disabled></el-input>
			</el-form-item>
			<el-form-item label="上级门店名称" prop="entrydate">
				<el-input v-model="ruleForm.shopName" disabled></el-input>
			</el-form-item>
			<el-form-item label="管理门店奖励" prop="manageInteralnum">
				<el-input v-model.number="ruleForm.manageInteralnum" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="上级门店奖励" prop="interalnum">
				<el-input v-model.number="ruleForm.interalnum" placeholder="请输入"></el-input>
			</el-form-item>
		</el-form>
		<div class="sub-btn">
			<el-button type="primary" style="width: 100px;" @click="submit" size="small">确认</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{
			type: Object,
			require: true
		}
	},
	data(){
		let checkRefund = (rule, value, callback) => {
			if(typeof value != 'number'){
				return callback(new Error('返费只能是数字！'));
			}else{
				callback();
			}
		}
		return {
			state: 1,												//点击的初始状态
			ruleForm:{
				shopName: '',										//门店名称
				nextusername: '',									//下级入职人员姓名
				telnum: '',											//手机号码
				positionname: '',									//下级入职公告岗位
				companyname: '',									//企业名称
				entrydate: '',										//入职日期
				manageInteralnum: '',								//管理门店奖励
				interalnum: '',										//上级门店奖励	
			},
			rules:{
				manageInteralnum: [
					{ required: true, message: '请输入管理门店奖励', trigger: 'blur' },
					{ validator: checkRefund, trigger: 'blur' }
				],
				interalnum: [
					{ required: true, message: '请输入上级门店奖励', trigger: 'blur' },
					{ validator: checkRefund, trigger: 'blur' }
				]
			}
		}
	},
	methods:{
		submit(){
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					if(this.state == 1){
						this.state = 2;
						let form = {
							interalnum: this.ruleForm.interalnum,
							manageInteralnum: this.ruleForm.manageInteralnum,
						}
						this.$emit(this.options.eventName,form);
					}else{
						this.$message.warning('请勿重复点击！');
					}
					setTimeout(() => {
						this.state = 1;
					},3000)
					
				} else {
					this.$message.warning('请按要求填写正确的数据信息！');
					return false;
				}
			});
		}
	},
	watch:{
		'options.showDialog'(){
			if(this.options.showDialog){
				this.ruleForm = this.options.data;
				if(this.options.data.type == '4'){
					this.options.data.shopName = '';
				}
			}
		}
	}
}
</script>

<style scoped="scoped">
.header-title{padding: 20px;}
.header-title .border{width: 15px;height: 40px;background-color: #0064E4;margin-right: 20px;float: left;}
.header-title p{float: left;font-weight: bold;line-height: 40px;font-size: 20px;}
.ruleForm{width: 500px;margin: 20px 0 50px 40px;}
.sub-btn{text-align: center;padding-bottom: 30px;}
</style>
